.container .header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	background: $black;
	padding: 0 $pad;
	height: 54px;
	z-index: 1000;
	
	.logo {
		flex: none;
		font-size: 1.125rem;
		margin-top: $pad/16;
		color: $theme-color;
		width: 1.5em;
		height: 1.5em;
	}

	.settings {
		@extend %link;
		color: $theme-color;
		display: flex;
		min-width: 0;
		max-width: 20em;

		.name {
			margin: 0 $pad*0.25 0 $pad*0.5;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.icon.share {
			flex: none;
			color: $dark;
			width: 1em;
			margin-right: $pad*0.5;
		}
	}
	
	.signin.selected a {
		color: $white !important;
	}

	ul {
		padding: 0;
		white-space: nowrap;

		li {
			display: inline-block;

			&:first-child {
				margin-left: 0;
			}
		}
	}

	ul.file {
		text-align: right;

		li {
			@extend .button;
			
			color: $light;
			background: $darkest;

			&:hover {
				background: $darker;
			}
			
			&.save {
				color: $theme-color;
				font-weight: bold;

				.savekey {
					font-size: 0.875em;
					font-weight: normal;
					color: $mid;
				}
			}
		}
	}

	.button.theme {
		padding: $pad * 0.3755;;
		background: $darkest;

		&.selected .icon {
			color: $theme-color;
		}

		&:hover {
			background: $darker;
		}
	}
	
	ul.etc {
		flex: 1;
		text-align: right;
		font-size: 0.875rem;
		color: $dark;

		li {
			margin-left: $pad;
		}
	}
}

#tooltip-signin {
	ul.list li {
		@extend .button;
		margin: $pad*0.25 0;
		padding: $pad*0.625;
		color: $lightest;

		opacity: 0.85;
		&:hover {
			opacity: 1;
		}

		&[data-id='GitHub'] {
			background: #777777 !important;
		}

		&[data-id='Facebook'] {
			background: #4267B2 !important;
		}
		&[data-id='Google'] {
			background: #C94130 !important;
		}
		
		>svg.icon {
			margin-right: $pad*0.625;
		}
	}

	.signout {
		display: none;

		.signoutbtn {
			cursor: pointer;
			color: $theme-color;
			font-weight: bold;
			
			&:hover {
				color: $doc-white;
			}
		}
	}
	
	&.authenticated {
		.signin {
			display: none;
		}
		.signout {
			display: block;
		}
	}

	.distract {
		display: none;
		color: $mid;

		.distractor {
			margin-right: $pad/2;
		}
	}

	&.wait {
		.distract {
			display: block;
		}

		.signout .signoutbtn, .signin .list {
			display: none;
		}
	}
}